<template>
    <div class="container">
        <van-row>
            <van-col span="4">
                <div style="height: 100vh;width: 100%;">
                    <div class="item" v-for="(item,index) in state.dataList" :style="{color: state.activeIndex === index ? '#409EFF' : '',}" @click="handleIndex(index)" :key="index">
                        {{item.title}}
                    </div>
                </div>
            </van-col>
            <van-col span="20">
                <div class="flex">
                    <div v-for="(item,index) in state.codeList" :key="index">
                        {{item}}
                    </div>
                </div>
                <component :is="com" :key="Math.random()"></component>
            </van-col>
        </van-row>
    </div>
</template>


<script lang="ts" setup>
import {computed, reactive, ref} from "vue";
import FourParams from './FourParams.vue'
import maxParams from './maxParams.vue'
import translate from './translate.vue'
import collectExcel from './collectExcel.vue'
import ExcelRead from './ExcelRead.vue'
import SortValueArr from './SortValueArr.vue'
const state = reactive({
    codeList: ['℃','＞','≥','＜','≤','±'],
    activeIndex: 0,
    dataList: [
        {
            title: '返回正数平均值，4个参数（总条数41条，数，值+-范围，不超过144）',
            com: FourParams,
        },
        {
            title: '返回任意数量随机数，无限制参数（9个“Ⅰ-Ⅱ期”，42个“Ⅲ-Ⅳ期”）',
            com: maxParams,
        },
        {
            title: '翻译（excel单列数据翻译）',
            com: translate,
        },
        {
            title: '读取excel并输出',
            com: ExcelRead,
        },
        {
            title: '多列横向对比排序',
            com: SortValueArr,
        },
        // {
        //     title: '汇总',
        //     com: collectExcel,
        // }
   ]
})
const com = computed(() => {
    return state.dataList[state.activeIndex].com
})
const handleIndex = (index) => {
    state.activeIndex = index
}


</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  overflow-y: auto;
  background: #F7F8FA;
}
.item{
    margin: 10px 20px;
}
.flex{
    display: flex;
    div{
        margin-left: 10px;
    }
}
</style>

